<template>
  <section>
    <div class="bg-[#2D2D2D] text-white py-12">
      <div class="w-275 mx-auto text-center">
        <!-- Title -->
        <h1 class="applications-title">{{ applications.title }}</h1>
        <!-- Subtitle -->
        <p class="applications-sub-title">
          {{ applications.subTitle }}
        </p>

        <!-- Applications Grid -->
        <div class="grid grid-cols-3 gap-8">
          <!-- Application Card -->
          <div
            v-for="(item, index) in items"
            :key="index"
            class="flex items-center space-x-4 border-l-4 border-[#C00000] px-4 py-2"
          >
            <figure class="mr-2 w-10">
              <img :src="item.iconUrl" alt="" />
            </figure>
            <span class="applications-icon-title">{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import MedicalDevices from '/src/images/common/applications-1.webp'
import Automotive from '/src/images/common/applications-2.webp'
import Aerospace from '/src/images/common/applications-3.webp'
import Electronics from '/src/images/common/applications-4.webp'
import ConsumerProducts from '/src/images/common/applications-5.webp'
import Security from '/src/images/common/applications-6.webp'

// 接收父组件参数
defineProps({
  applications: {
    title: String,
    subTitle: String
  }
})

const items = ref([
  {
    iconUrl: MedicalDevices,
    title: 'Medical devices'
  },
  {
    iconUrl: Automotive,
    title: 'Automotive'
  },
  {
    iconUrl: Aerospace,
    title: 'Aerospace'
  },
  {
    iconUrl: Electronics,
    title: 'Electronics'
  },
  {
    iconUrl: ConsumerProducts,
    title: 'Consumer Products'
  },
  {
    iconUrl: Security,
    title: 'Security'
  }
])
</script>

<style scoped>
.applications-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 54px;
  letter-spacing: normal;
}

.applications-sub-title {
  font-size: 16px;
  line-height: 27px;
  letter-spacing: normal;
  margin-top: 20px;
  margin-bottom: 50px;
}

.applications-icon-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: normal;
}
</style>
